<template>
    <div class="addApply">
        <n-modal :show-icon="false" v-model:show="showModal" preset="dialog" title="创建" style="width:50%"
            :on-after-leave="cancelCallback">
            <div class="cotent">
                <n-form ref="formRef" :model="fromData" :rules="rules" label-placement="left">
                    <n-form-item label="休假类型" path="createData.applyType">
                        <n-select filterable placeholder="请选择" v-model:value="fromData.createData.applyType"
                            :options="optionSelect" @update:value="getOptionSelect" />
                    </n-form-item>
                    <n-form-item label="休假时间" path="createData.vacationTime">
                        <n-date-picker v-model:value="fromData.createData.vacationTime"
                            @update:value="handleUpdateValue" type="daterange" clearable />
                    </n-form-item>
                    <n-form-item label="休假时长" path="createData.applyState">
                        <p class="vacationDayM"><span class="vacationDaySapn">{{ fromData.createData.leaveTime
                        }}</span>天</p>
                    </n-form-item>

                    <n-form-item label="休假原因" path="createData.reasons">
                        <n-input v-model:value="fromData.createData.reasons" type="textarea" placeholder="请输入" />
                    </n-form-item>
                </n-form>
            </div>
            <template #action>
                <n-space>
                    <n-button @click="cancelCallback">取消</n-button>
                    <n-button type="info" :loading="formBtnLoading" @click="submitCallback">确定</n-button>
                </n-space>
            </template>
        </n-modal>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onMounted, onBeforeMount } from 'vue'
import { formatDate, getDifferTime } from '../../../../utils/common'
import { leaves0perate } from '../../../../api/leaves'
import { useMessage } from 'naive-ui'
const message = useMessage()
export default {
    setup(props, { emit }) {
        const state = reactive({
            showModal: false,
            formBtnLoading: false, //Loading
            // 表单验证
            rules: {
                createData: {
                    // applyState: {
                    //     required: false,
                    //     message: "请选择时间",
                    //     trigger: 'blur',
                    // },

                    // vacationTime: {
                    //     required: false,
                    //     message: "请输选择时间",
                    //     trigger: 'blur',
                    // },
                    // leaveTime: {
                    //     required: false,
                    //     message: "请选择请假类型",
                    //     trigger: 'blur',
                    // },
                    // reasons: {
                    //     required: false,
                    //     message: "请选择负责",
                    //     trigger: 'blur',
                    // }
                }
            },
            optionSelect: [
                {
                    label: '事假',
                    value: 1
                }, {
                    label: '调休',
                    value: 2
                },
                {
                    label: '年假',
                    value: 3
                },
            ],
        })

        const createvalue = ref({
            createData: {
                applyType: null, //休假类型
                vacationTime: null, //休假时间
                startTime: null,
                endTime: null,
                leaveTime: null,  //休假时长
                reasons: '',  //休假原因
                action: 'create'
            }
        })
        const methods = reactive({
            createDepart(item) {
                state.showModal = true
            },
            //取消
            cancelCallback() {
                // @ts-ignore
                createvalue.value.createData = {}
                state.showModal = false
            },
            //    确定
            submitCallback() {
                delete createvalue.value.createData.vacationTime
                leaves0perate(createvalue.value.createData).then(res => {
                    state.showModal = false
                    message.success('添加成功')
                    // @ts-ignore
                    createvalue.value.createData = {}
                    emit('getLeaveList', '')
                })

            },
            //下拉框回调
            getOptionSelect(item, option) {
                createvalue.value.createData.applyType = item
            },
            //部门选择回调
            handleUpdateValue(item, option) {
                createvalue.value.createData.leaveTime = getDifferTime(formatDate(item[0] / 1000), formatDate(item[1] / 1000))
                createvalue.value.createData.vacationTime = item
                createvalue.value.createData.startTime = formatDate(item[0] / 1000, 'Y-M-D')
                createvalue.value.createData.endTime = formatDate(item[1] / 1000, 'Y-M-D')
                createvalue.value.createData['DateProcess'] = formatDate(item[0] / 1000, 'Y-M-D') + "__" + formatDate(item[1] / 1000, 'Y-M-D')
            }
        })

        return {
            fromData: createvalue,
            ...toRefs(state),
            ...toRefs(methods),

        }
    },
}
</script>
<style lang="scss">
.vacationDayM {
    padding-left: 20px;

}

.vacationDaySapn {
    color: red;
    display: inline-block;
    padding: 0 5px;
}
</style>